import { useState, useEffect } from "react";
import { Form, message, Alert, Button, Radio, Space } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { uniqueconfigSubmit, getUniqueconfigList } from "../service";
import OrderRangeModal from "./OrderRangeModal";
import GoodsRangeModal from "./GoodsRangeModal";
import { cloneDeep } from "lodash";

const OnlyCodeDispositionModal = ({ visible, query, checkedRows, checkedIds, handleOk, handleCancel }) => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);
	const [checked, setChecked] = useState(false);
	const [setGoods, setSetGoods] = useState({
        0: false,
        1: false,
        2: false,
        3: false,
    }); //按钮默认值
	const [getGoods, setGetGoods] = useState(true);
	const [getGoodsAgain, setGetGoodsAgain] = useState(true);
	const [dispositionList, setDispositionList] = useState([]);
	const [rangeVisible, setRangeVisible] = useState(false); //订单/商品范围

	useEffect(() => {
		getTableList();
		if (visible) {
			form.resetFields();
		}
	}, [visible]);
	const onOk = () => {
		form.validateFields().then(async value => {
			const { success } = await uniqueconfigSubmit(dispositionList);
			if (success) {
				message.success("操作成功");
				onCancel();
			}
			setLoading(false);
		});
	};
	const getTableList = async () => {
		const { data, success } = await getUniqueconfigList();
		if (success) {
			setDispositionList(data.records);
			// setSetGoods(data.records[0].uniqueValue == 1 ? true : false);
			// setGetGoods(data.records[1].uniqueValue == 1 ? true : false);
            setSetGoods({
                0: data.records[0].uniqueValue == 1 ? true : false,
                1: data.records[1].uniqueValue == 1 ? true : false,
                2: data.records[2].uniqueValue == 1 ? true : false,
                3: data.records[3].uniqueValue == 1 ? true : false,
            })
			// defaultChecked={dispositionList ? dispositionList[0].uniqueValue : 0}
		}
	};
	useEffect(() => {}, [dispositionList]);

    //修改配置开关
	const onChange = (checked, key) => {
		if (checked.target.value == 1) {
			if (dispositionList.length > 0) {
				dispositionList[key].uniqueValue = '1';
			}
		} else {
			dispositionList[key].uniqueValue = '0';
		}
		const obj = cloneDeep(setGoods);
		obj[key] = checked.target.value == 1 ? true : false;
		setSetGoods(obj);
	};

	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};

	//订单范围
	const OrderRangeModalProps = {
		handleCancel() {
			setRangeVisible(false);
		}
	};

	//商品范围
	const GoodsRangeModalProps = {
		handleCancel() {
			setRangeVisible(false);
		}
	};

	return (
		<CommonModal title={{ title: "唯一码配置" }} visible={true} width="590px" onOk={onOk} onCancel={onCancel} minHeight="150px">
			<Form form={form} name="mark-unuaual-modal">
				<Alert
					className="mb18"
					message={
						<div as="s1">
							<div className=" flex jcsb" style={{ justifyContent: "space-between ", fontSize: "12px" }}>
								<div>
									<div>订单作废是否作废待拿货任务</div>
									<div style={{ color: "rgba(153, 153, 153, 1)" }}>
										<Space size={16}>
											<span>是：作废待拿货任务</span>
											<span>否：不作废待拿货任务</span>
										</Space>
									</div>
								</div>
								<div style={{ display: "flex", alignItems: "center" }}>
									{dispositionList.length > 0 && (
										<Radio.Group onChange={(e) => onChange(e,0)} value={dispositionList[0].uniqueValue}>
											<Radio value="1">是</Radio>
											<Radio value="0">否</Radio>
										</Radio.Group>
									)}
								</div>
							</div>
						</div>
					}
				/>
				<Alert
					className="mb18"
					message={
						<div as="s1">
							<div className="flex" style={{ justifyContent: "space-between", fontSize: "12px" }}>
								<div style={{ width: 400 }}>
									<div>
										订单&商品唯一码<span style={{ color: "rgba(240, 61, 41, 1)" }}>绑定发货（单件订单）</span>
									</div>
									{setGoods[1] && (
										<div style={{ color: "rgba(153, 153, 153, 1)" }}>
											一单一件的商品唯一码与订单做<span style={{ color: "rgba(240, 61, 41, 1)" }}>绑定</span>
											处理，该订单只能用订单内的商品唯一码发货
										</div>
									)}
									{!setGoods[1] && (
										<div style={{ color: "rgba(153, 153, 153, 1)" }}>
											一单一件的商品，在发货时根据商品唯一码所关联的商品编码下的所有订单的平台最晚发货时间来进行发货，若没有最晚发货时间则根据订单付款时间来倒叙发货。
										</div>
									)}
								</div>
								<div style={{ display: "flex", alignItems: "center" }}>
									{dispositionList.length > 0 && (
										<Radio.Group onChange={(e) => onChange(e, 1)} value={dispositionList[1].uniqueValue}>
											<Radio value="1">是</Radio>
											<Radio value="0">否</Radio>
										</Radio.Group>
									)}
								</div>
							</div>
						</div>
					}
				/>
				<Alert
					className="mb18"
					message={
						<div as="s1">
							<div className="flex" style={{ justifyContent: "space-between", fontSize: "12px" }}>
								<div style={{ width: 400 }}>
									<div>
										销退入库商品是否支持<span style={{ color: "rgba(240, 61, 41, 1)" }}>再次发货（单件订单）</span>
									</div>
									<div style={{ color: "rgba(153, 153, 153, 1)" }}>
										针对退货销退入库的商品，支持再次扫商品编码发货，这里只能针对单件订单进行发货处理
									</div>
								</div>
								<div style={{ display: "flex", alignItems: "center" }}>
									{dispositionList.length > 0 && (
										<Radio.Group onChange={(e) => onChange(e, 2)} value={dispositionList[2].uniqueValue}>
											<Radio value="1">是</Radio>
											<Radio value="0">否</Radio>
										</Radio.Group>
									)}
								</div>
							</div>
						</div>
					}
				/>

				<Alert
					message={
						<div as="s1">
							<div className="flex" style={{ justifyContent: "space-between", fontSize: "12px" }}>
								<div style={{ width: 400 }}>
									<div>
										退回供应商商品是否支持<span style={{ color: "rgba(240, 61, 41, 1)" }}>再次发货（单件订单）</span>
										<Button onClick={() => setRangeVisible("order")} type="link">
											订单范围
										</Button>
										<Button onClick={() => setRangeVisible("good")} type="link" >
											商品范围
										</Button>
									</div>
									<div style={{ color: "rgba(153, 153, 153, 1)" }}>
										针对退货销退入库的商品，支持再次扫唯一码发货，这里只能针对单件订单进行发货处理
									</div>
								</div>
								<div style={{ display: "flex", alignItems: "center" }}>
									{dispositionList.length > 0 && (
										<Radio.Group onChange={(e) => onChange(e, 3)} value={dispositionList[3].uniqueValue}>
											<Radio value="1">是</Radio>
											<Radio value="0">否</Radio>
										</Radio.Group>
									)}
								</div>
							</div>
						</div>
					}
				/>
			</Form>
			{rangeVisible == "order" && <OrderRangeModal {...OrderRangeModalProps} />}
			{rangeVisible == "good" && <GoodsRangeModal {...GoodsRangeModalProps} />}
		</CommonModal>
	);
};

export default OnlyCodeDispositionModal;
